<template>
  <div class="container" ref="container">
    <div v-for="(item, index) in list" :key="index" class="circle" ref="circle" :style="{
      left: item.left,
      top: item.top,
      width: `${item.size}px`,
      height: `${item.size}px`,
      // color: item.color,
      background: `linear-gradient(180deg, ${item.color2} 0%, ${item.color1} 100%)`
    }">
      <!-- <div class="num" :style="{ fontSize: `${item.numSize}px` }">{{ item.title }}</div> -->
      <div class="title">{{ item.title }}年</div>
      <div class="num">{{ item.num }}&nbsp;个</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import gsap from 'gsap';

// 定义组件的 props
const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
});

// 使用 props 中的数据
const list = ref(props.items);

const container = ref(null);
const circle = ref([]);

onMounted(() => {
  applyShakeAnimation();
});

const applyShakeAnimation = () => {
  if (circle.value) {
    circle.value.forEach((circleEl) => {
      gsap.fromTo(
        circleEl,
        1,
        { y: -2 },
        {
          y: 2,
          ease: 'none',
          yoyo: true,
          repeat: -1,
          delay: Math.random(),
        }
      );
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("./assets/huanbg.png") center center no-repeat;
  background-size: 80%;

  .circle {
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;

    .title {
      font-size: 16px;
      // font-family: DIN-Bold;
      // font-weight: bold;
      line-height: 30px;
    }

    .num {
      font-size: 18px;
      // font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
    }
  }
}
</style>